<template>
  <div style="margin-top: 80px">
    <div class="big" >欢迎，请先登录</div>
    <el-divider></el-divider>
    <div class="small">请输入账号密码</div>
    <div class="common">

      <el-input v-model="form.username" type="text" key="username" placeholder="用户名/邮箱">
        <template #prefix>
          <el-icon ><User /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="common">
      <el-input v-model="form.password" type="password" key="password" placeholder="密码">
        <template #prefix>
          <el-icon><Lock /></el-icon>
        </template>
      </el-input>
    </div>
    <div>
      <el-row>
        <el-col :span="12" style="text-align: left">
          <el-checkbox v-model="form.remember" label="记住我" size="large"/>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-link @click="router.push('forget')">忘记密码？</el-link>
        </el-col>
      </el-row>
    </div>
    <el-button @click="Longin" type="primary" style="width:250px;margin-top: 20px;" plain>登录</el-button>
    <el-divider>没有账户？</el-divider>
    <el-button type="success" @click="router.push('/register')" style="width:250px; margin-top: 20px;" plain>立即注册
    </el-button>
  </div>
</template>

<script setup>
import {User,Lock} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {reactive} from "vue";
import {login} from "@/net";
import {get, post} from "@/net";
import router from "@/router";

const form=reactive({
  username:'',
  password:'',
  remember:'false',
  tableData:[]
})
const Longin =()=>{
  if(!form.username||!form.password)
    ElMessage.warning('请填写用户名和密码')
  else {
    let a=form.username
    let b=form.password
    let data=(login({a,b})).data
        console.log(data)
          ElMessage.success('登录成功')
              router.push('/manager')
        }
}

</script>
<style>
.big{
  font-size: 30px;
  color: black;
  font-weight: bold;}
.small{
  font-size: 14px;
  color: dodgerblue
}
.common{
  margin-top: 50px;
}
</style>
